<template>
    <ElForm
        ref="formRef"
        v-bind="props"
        :rules="formRules"
        :model="formData"
        @submit.prevent
    >

        <ElFormItem
            v-for="item in formLists"
            :key="item.id"
            :prop="item.id"
            :class="[item.props.isMemberUse?'designer':'designer-v1']"
            :label="item.props.title"
        >
          <template #label>
            <span>{{item.props.title}}</span>
            <img src="https://www.caixue8.cn/uploads/wap/f-vip (1).png" class="pos" v-if="item.props.isMemberUse">
            <span v-if="item.props.isPl" class="pl">批量</span>
          </template>

          <div :class="[item.props.isMemberUse?'el-upload__tip':'el-upload__tip-v1']"  v-if="/^(file_up|img_up|img_generation|form_up|img_understand|transcription_up|video_understand|input_video_url)\d*$/.test(item.id)">
              {{item.props.placeholder}}
          </div>



          <component
            :item_id="item.id"        
            v-bind="item.props"         
            :model_id="model_id"
            @imgStatus="imgStatus"
            @imgUnStatus="imgunStatus"
            @fileStatus="fileStatus"
            @formStatus="formStatus"
            @videomp3Status="videomp3Status"
            @videoStatus="videoStatus"
            @imgGeneration="imgGeneration"
            :is="getWidgetByName(item.name)"
            v-model="formData[item.id]"
/>
        </ElFormItem>
    </ElForm>
</template>

<script setup lang="ts">
import type { FormProps } from 'element-plus'
import * as widgets from './widgets'
import {Position} from "@element-plus/icons-vue";

interface Props extends Partial<FormProps> {
    formLists: any[]
    model_id: Record<string, any>
    modelValue: Record<string, any>
}

const props = withDefaults(defineProps<Props>(), {
    labelPosition: 'top',
    formLists: () => []
})




const emit = defineEmits<{
    (event: 'update:modelValue', value: any): void
}>()
const formRef = shallowRef()
const formData = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emit('update:modelValue', value)
    }
})
const formRules = ref<any>({})
const getWidgetByName = (name: string) => {
    return (widgets as any)[name]
}
const validate = async () => {
    await formRef.value?.validate()
}

const imgGeneration = (e) => {
   emit('img_generation', e)
}


const imgStatus = (e) => {
  emit('img', e)
}

const fileStatus = (e) => {
  emit('file', e)
}
const formStatus = (e) => {
  emit('form', e)
}

const imgunStatus = (e) => {
  emit('imgUn', e)
}

const videoStatus = (e) => {
  console.log(e)
  console.log('执行了吗')
  emit('videoStatus', e)
}

const videomp3Status = (e) => {

  emit('videomp3Status', e)
}


watch(
    () => props.formLists,
    (value) => {
        formRules.value = value?.reduce((prev: any, item: any) => {
            formData.value[item.id] = undefined

            if (item.props.isRequired) {
                prev[item.id] = [
                    {
                        required: true,
                        message: '必填项不能为空',
                        trigger: 'blur'
                    }
                ]
            }
            return prev
        }, {})
    },
    {
        immediate: true
    }
)

defineExpose({
    validate
})
</script>

<style scoped>
.designer {
    :deep(.el-form-item__label) {
        color: #784c2c !important;
        position: relative;
    }
}
.designer-v1 {
  :deep(.el-form-item__label) {
    color: #333333 !important;
    position: relative;
  }
}
.pos {
  width: 14px;
  height: 14px;
  display: inline;
  vertical-align: text-top;
}

.el-upload__tip-v1 {
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 0px;
}

.el-upload__tip {
  font-size: 12px;
  color: #784c2c;
  margin-top: 0px;
}
.pl {
  color: red;
  font-weight: 400;
  margin-left: 5px;
  font-size: 11px;
}
</style>
